<template>
  <div style="margin-top: -20px">
    <div style="margin: 0 auto;">
      <el-carousel style="padding: 0;margin: 0 auto;height: 400px;border-radius: 10px">
        <el-carousel-item style="height: 400px"><img src="https://carphoto.atzuche.com/pcweb/1694056373933.jpg" width="100%" height="100%">
          <span class="slogan"></span>
        </el-carousel-item>
        <el-carousel-item style="height: 400px"><img src="	https://carphoto.atzuche.com/pcweb/1694056364182.jpg" width="100%" height="100%">
          <span class="slogan"></span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="width: 1100px;margin: 0 auto">
      <el-row style="margin-top: -30px;margin-left: 15px;z-index: 5">
        <el-col :span="6">
          <a class="banner" target="_blank" href="/login">
            <div>
            <img src="https://cdn.atzuche.com/pc/subbanner/banner1.jpg">
            </div>
          </a>
        </el-col>
        <el-col :span="6">
          <a class="banner" target="_blank" href="/duanzu">
            <div>
            <img src="https://cdn.atzuche.com/pc/subbanner/banner2.jpg"></div>
          </a>
        </el-col>
        <el-col :span="6">
          <a class="banner" target="_blank" href="">
            <div>
            <img src="https://cdn.atzuche.com/pc/subbanner/banner3.jpg"></div>
          </a>
        </el-col>
        <el-col :span="6">
          <a class="banner" target="_blank" href="">
            <div>
            <img src="https://cdn.atzuche.com/pc/subbanner/banner7.png"></div>
          </a>
        </el-col>

      </el-row>
      <el-row style="margin-top: 50px">
        <el-col :span="6">
          <el-card class="card">
            <h3 style="text-align: left">300</h3>
            <p>业务覆盖近<em>300</em>个城市</p>
            <div class="icon">
              <img src="https://www.atzuche.com/static/media/bg-superiority-1.050cee88.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card">
            <h3 style="text-align: left">20,000,000+</h3>
            <p>注册用户突破<em>2000</em>万</p>
            <div class="icon">
              <img src="https://www.atzuche.com/static/media/bg-superiority-2.56c87b81.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card">
            <h3 style="text-align: left">10,000+</h3>
            <p>超全车型逾<em>10000</em>款</p>
            <div class="icon">
              <img src="https://www.atzuche.com/static/media/bg-superiority-3.8cabe447.png">
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card">
            <h3 style="text-align: left">300,000+</h3>
            <p>注册车辆超过<em>30</em>万辆</p>
            <div class="icon">
              <img src="https://www.atzuche.com/static/media/bg-superiority-4.d14c1741.png">
            </div>
          </el-card>
        </el-col>

      </el-row>
      <p style="font-size: 32px;font-weight: bold;margin-top: 50px">租车服务</p>
      <div>
        <el-radio-group v-model="type">
          <el-radio-button label="1" >日租</el-radio-button>
          <el-radio-button label="2" >月租</el-radio-button>
        </el-radio-group>

        <el-row :gutter="20">
          <el-col :span="8" v-for="item in carArr" :key="item.id" style="margin: 10px 0">
            <el-card style="height: 350px;border-radius: 10px;padding: 10px">
              <p style="float: left;">{{item.name}}  {{item.type}}</p>
              <p style="float: right;color: red;font-weight: bold" v-if="type==1">{{item.priceDay}}/天</p>
              <p style="float: right;color: red;font-weight: bold" v-if="type==2">{{item.priceMonth}}/月</p>
              <div style="margin: 0;width: 300px;height: 200px" @click="getDetailById(item.id)">
                <img :src="'http://localhost:19283'+item.imgUrl" style="width: 100%;height: 100%">
              </div>
              <p style="float: left;font-size: 14px;margin: 5px 0">{{item.info}}</p>
              <p style="float: left;font-size: 14px;margin: 5px 5px">{{item.a}}</p>
            </el-card>
          </el-col>
        </el-row>

      </div>
      <p style="font-size: 32px;font-weight: bold;margin-top: 50px">热租品牌</p>

      <el-row calss="brand">
        <el-col :span="4" v-for="item in brandArr" :key="item.id">
          <a style="text-decoration: none;width: 165px;height: 165px;" @click=getListByBrandId(item.id)>
            <img class="a_img" :src="'http://localhost:19283'+item.imgUrl">
            <p class="a_p">{{item.name}}</p>
          </a>
        </el-col>
      </el-row>

      <p style="font-size: 32px;font-weight: bold;margin-top: 50px">租车专题</p>
      <el-row style="margin-top: 50px">
        <el-col :span="6">
          <el-card class="card" style="margin: 0;border-radius: 20px">
            <img width="240" height="160" src="https://carphoto.atzuche.com/pcWebService/imageFile/1693366084331.jpg">
            <h3>国庆租车</h3>
            <p style="margin: 10px 0">2023国庆租车专题，提供国庆租车价格，国庆租车攻略、国庆租车具体车型推荐等，
              更有超多国庆租车优惠；共享汽车模式，让你享受随时随地的共享租车体验!</p>
          </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="card" style="margin: 0;border-radius: 20px">
              <img width="240" height="160" src="	https://carphoto.atzuche.com/pcWebService/imageFile/1682481422229.jpg">
              <h3>五一租车</h3>
              <p style="margin: 10px 0">2023五一租车专题，提供五一租车价格，五一租车攻略、五一租车具体车型推荐等，
                更有超多五一租车优惠；共享汽车模式，让你享受随时随地的共享租车体验！</p>
            </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card" style="margin: 0;border-radius: 20px">
            <img width="240" height="160" src="https://carphoto.atzuche.com/pcWebService/imageFile/1671526624000.jpg">
            <h3>春节租车</h3>
            <p style="margin: 10px 0">凹凸租车-春节租车专题，为你提供春节租车价格明细表、精选春节租车攻略、春节租车具体车型推荐等，
              更有超多春节租车优惠；共享汽车模式，让你享受随时随地的共享租车体验！</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card" style="margin: 0;border-radius: 20px">
            <img width="240" height="160" src="	https://carphoto.atzuche.com/pcWebService/imageFile/1622010513561.jpg">
            <h3>端午租车</h3>
            <p style="margin: 10px 0">凹凸租车-端午租车专题，为您提供端午租车价格信息、端午租车报价等信息，包括热门租车车型、便宜租车车型；
              P2P租车模式，让你享受随时随地租车体验。</p>
          </el-card>
        </el-col>

      </el-row>

<!--      <p style="font-size: 32px;font-weight: bold;margin-top: 50px">热门城市</p>-->


    </div>
  </div>
</template>

<script>
export default {
  name: "indexView",
  data() {
    return {
      radio: "日租",
      carArr:[],
      brandArr:[],
      type: 1
    }
  },

  methods: {
    getDetailById(id){
      this.$router.push("/detail?id="+id)
    },
    getListByBrandId(id){
      this.$router.push("/duanzu?brandId="+id)
    }
  },
  mounted() {
    this.axios.get("http://localhost:19481/brand/listHome")
        .then((response) => {
          if (response.data.state == 20000) {
            this.brandArr = response.data.data.list;
          }
        })
    this.axios.get("http://localhost:19482/car/listHome")
        .then((response) => {
          if (response.data.state == 20000) {
            this.carArr = response.data.data.list;
          }
        })
  },

}
</script>
<style scoped>
.a_img{
  width: 165px;height: 165px;border-radius: 150px;
}
.a_p{
  display: block;margin-top: -40px;font-size: 20px;color: white;
}
.slogan{
  width: 394px;
  height: 98px;
  background-image: url("https://www.atzuche.com/static/media/slogan.99208d6f.png");
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -33px;
  margin-left: -197px;
  z-index: 9;
}
.banner>div{
   width: 250px;
   height: 100px;
 }
.banner>div> img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.banner>div>img:hover{
  width: 260px;
  height: 110px;
  border-radius: 10px;
}

.icon>img{
  width: 140px;
  height: 100px;
  float: right;
  margin: 20px 0;
}
.card{
  margin: 0 10px;
}
.card h3{
  font-size: 32px;
  margin: 0;
}
.card p {
  margin: 0;
  float: left;
  font-size: 13px;
}
.card p em{
  color: #00cf97;
}
.brand img:hover{

}
.brand p{
  display: block;
  margin-top: -35px;
}
</style>